<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>高血压调查</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <script src="../assets/js/views/vue.js"></script>
    <link rel="stylesheet" href="../assets/css/views/modules/_common.scss">
    <link rel="stylesheet" href="${assets}/css/views/department/departmentMgr.css">
    <link rel="stylesheet" href="../assets/css/views/question/question.css">
    <style>
        .questions ul li{
            margin-top:0px;
        }
        h1{
            line-height:60px !important;
            margin:0 !important;
            padding:0 !important;
        }
        h2{
            width:150%;
        }
    </style>
</head>
<body>
<div>
    <%@ include file="../../breadline.jsp" %>
</div>
<div id="main">
    <div class="content">
        <div class="contianer">
            <h1>问卷调查</h1>
            <div class="situation">
                <ul>
                    <li v-for="item in subtitleId" :class="item.classname">
                        <span :title="item.id">{{item.subtitle}}</span>
                    </li>
                </ul>
            </div>
            <div class="questions" style="margin-top:40px;">
                <ul>
                    <li v-for="item in questions" class="subject" :title="item.id" :code="item.state">
                        <h2 for="question">{{item.question}}
                            <span style="color:red;" v-if="item.state === 1" >*</span>
                            <span style="color:red;" v-else></span>
                        </h2>
                        <form class="fromId">
                            <div class="check" v-for="itm in item.options" class="sub">
                                <input :type="item.check" :id="itm.id" :name="item.question">
                                <label :for="itm.id">{{itm.text}}</label>
                            </div>
                        </form>
                    </li>
                </ul>
            </div>
            <div style="width:450px;margin:0 auto;">
                <div style="width:200px;display:inline-block;margin-right:30px;">
                    <button class="btn" id="submit" @click="prev">返回上一页</button>
                </div>
                <div style="width:200px;display:inline-block">
                    <button class="btn" id="submit" @click="submit()">提交并继续</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el : '#main',
        data : {
            type : '',
            titleId : '',
            subtitle : '',
            subtitleId:[],
            questions : [],
            situation:[],
            // 本地数据
            options:[],
            results:[],
            storage:[],
            idcard:'',
            patientId:'',
            // 总数居
            json:[],
            typejson:[],
            arr:[],
            num : 0
        },
        methods : {
            title : function(){
                let that = this
                $.ajax ({
                    url : '${URL_QUESTIONNAIRE_SUBTITLES}',
                    data : {
                        titleId : that.titleId
                    },
                    dataType : 'json',
                    type : 'post',
                    async: false,
                    success : function (data){
                        for( var a = 0; a < data.data.length; a++ ){
                            that.subtitle = data.data[that.num].id
                            if( that.num == '0' ){
                                data.data[a].classname = 'otherunactive'
                                data.data[0].classname = 'active_title'
                            }else{
                                data.data[a].classname = 'otherunactive'
                                data.data[that.num].classname = 'otheractive'
                                data.data[0].classname = 'unative_title'
                            }
                        }
                        that.subtitleId = data.data;
                        $('input').removeAttr("checked")
                        return that.play()
                    }
                })
            },
            play : function(){
                let that = this;
                return that.subtitles()
            },
            subtitles : function(){
                let that = this;
                $.ajax ({
                    url : '${URL_QUESTIONNAIRE_QUESTIONS}',
                    data : {
                        subtitleId : that.subtitle
                    },
                    dataType : "json",
                    type : 'post',
                    success : function(data){
                        for( var a = 0; a < data.data.length; a++ ){
                            data.data[a].num = a+1
                            data.data[a].options = data.data[a].options.reverse()
                            if( data.data[a].type == '1' ){
                                data.data[a].check = 'radio'
                            }else if( data.data[a].type == '2' ){
                                data.data[a].check = 'check'
                            }
                        }
                        that.questions = data.data
                    }
                })
            },
            submit : function(){
                let that = this;
                console.log(that.num)
                // 获取当前所有题目的节点
                // 判断所有题目是否都有选择
                var subject = $('.subject')
                var inputs;
                var s = 0;
                that.arr = []
                // 获取当前所有单选框
                for( var a = 0; a < subject.length; a++ ){
                    // 必填题目 的选择框
                    var inputs = $(subject[a]).find('input');
                    // 判断是否选择
                    for( var i = 0; i < $(subject[a]).find('input').length; i++ ){
                        if( $(subject[a]).find('input')[i].checked == true ){
                            that.storage.push({
                                questionId:$(subject[a]).attr('title'),
                                option:i+""
                            })
                            that.arr.push({
                                "questionId":$(subject[a]).attr('title'),
                                "option":i+""
                            })
                            $(subject[a]).addClass('redio');
                            // 获取当前选中的所有数据
                            // 判断是否含有该数据
                        }
                    }
                }
                if( that.storage.length < subject.length ){
                    var add = []
                    var isSatet = false;
                    for( var a = 0; a < subject.length; a++ ){
                        if( $(subject[a]).attr('code') == 1 ){
                            if( !$(subject[a]).hasClass('redio') ){
                                if( $(subject[a]).children(":first").children(":last").hasClass('defalts') ){

                                }else{
                                    $(subject[a]).children(":first").children(":last").after('<span class="defalts" style="margin-left:10px;color:red;font-size:15px;">'+'该题目未选择'+'</span>')
                                }
                                add.push($(subject[a]))
                            }else if( $(subject[a]).hasClass('redio') ){
                                $(subject[a]).children(":first").children(":last").remove()
                            }
                        }else{
                            isSatet = true
                        }
                    }
                    if( add[0] ){
                        // 获取距离窗口的高度
                        var offset = $(add[0]).offset().top
                        parent.$("html,body").animate({ scrollTop: offset}, 0);
                    }
                    if( isSatet ){
                        // 保存数据
                        window.localStorage.setItem(that.num,JSON.stringify(that.storage));
                        that.num++;
                        that.title()
                        // 渲染
                        setTimeout(function(){
                            if( JSON.parse(window.localStorage.getItem(that.num)) =='' || JSON.parse(window.localStorage.getItem(that.num)) == null ){
                                var inpu = $('.fromId input')
                                for( var i = 0; i < inpu.length; i++ ){
                                    inpu[i].checked = false
                                }
                            }else{
                                that.json = JSON.parse(localStorage.getItem(that.num))
                                // 遍历并显示选择框
                                var subject = $('.subject')
                                for( var a = 0; a < that.json.length; a++ ){
                                    if( $(subject[a]).attr('title') === that.json[a].questionId ){
                                        var inputs = $(subject[a]).find('input')
                                        inputs[that.json[a].option].checked = true
                                    }
                                }
                                that.json = ''
                            }
                        },100)
                        that.storage = []
                    }
                }else if( that.storage.length === subject.length ){
                    if( $('.defalts') ){
                        $('.defalts').remove()
                    }
                    // 删除redio 类名
                    var subject = $('.subject')
                    for( var a = 0; a < subject.length; a++ ){
                        $(subject[a]).removeClass('redio')
                    }
                    // 保存数据
                    window.localStorage.setItem(that.num,JSON.stringify(that.storage))
                    // 提交
                    if( that.num >= $('.situation ul li').length - 1 ){
                        // 提交所有题目答案
                        var json = []
                        var questionjson = []
                        that.num = $('.situation ul li').length-1
                        for( var num = 0; num < $('.situation ul li').length; num++  ){
                            json.push(JSON.parse(localStorage.getItem(num)))
                        }
                        for( var a = 0; a < json.length; a++ ){
                            for( var i =0; i < json[a].length; i++ ){
                                questionjson.push(json[a][i])
                            }
                        }
                        var obj = {
                            "idCard":that.idcard,
                            "titleId":that.titleId,
                            "results":questionjson
                        }
                        var jsonlist = JSON.stringify(obj);
                        console.log(jsonlist)
                        $.ajax({
                            url:"${URL_QUESTIONNAIRE_ADD}",
                            data:jsonlist,
                            type:'post',
                            dataType:"json",
                            contentType: 'application/json',
                            success:function(data){
                                if( data.success ){
                                    parent.showSrc('${URL_QUESTIONNAIRE_TORECORDS}?idCard='+that.idcard+'&type='+ that.type+'&patientId='+that.patientId)
                                }
                            }
                        })
                        return
                    }
                    for( var a = 0; a < that.arr.length; a++ ){
                        that.typejson.push(that.arr[a])
                    }
                    // 切换
                    that.num++
                    that.title()
                    // 渲染
                    setTimeout(function(){
                        if( JSON.parse(window.localStorage.getItem(that.num)) =='' || JSON.parse(window.localStorage.getItem(that.num)) == null ){
                            var inpu = $('.fromId input')
                            for( var i = 0; i < inpu.length; i++ ){
                                inpu[i].checked = false
                            }
                        }else{
                            that.json = JSON.parse(localStorage.getItem(that.num))
                            // 遍历并显示选择框
                            var subject = $('.subject')
                            for( var i = 0;i < subject.length; i++ ){
                                var inputs = $(subject[i]).find('input')
                                inputs.checked = false
                            }
                            for( var a = 0; a < that.json.length; a++ ){
                                for( var i = 0;i < subject.length; i++ ) {
                                    if ($(subject[i]).attr('title') === that.json[a].questionId) {
                                        var inputs = $(subject[i]).find('input');
                                        console.log(inputs[that.json[a].option])
                                        inputs[that.json[a].option].checked = true
                                    }
                                }
                            }
                            that.json = ''
                        }
                    },100)
                    that.storage = []
                }
            },
            prev:function(){
                let that = this;
                // 获取本地数据
                that.num --;
                that.json = JSON.parse(localStorage.getItem(that.num))
                var subject = $('.subject');
                // 遍历并显示选择框
                if( that.num < 0 ){
                    that.num = 0
                    return
                }else{
                    that.title()
                    setTimeout(function() {
                        var subject = $('.subject')
                        for( var a = 0; a < that.json.length; a++ ) {
                            for( var i = 0; i < subject.length; i++ ){
                                if ( $(subject[i]).attr('title') === that.json[a].questionId ) {
                                    var inputs = $(subject[i]).find('input')
                                    inputs[that.json[a].option].checked = true
                                }
                            }
                        }
                    },500)
                }
            }
        },
        created(){
            let that = this;
            // 初始化获取当前id
            var href = location.search;
            that.titleId = href.split('?')[1].split('&')[0].split('=')[1]
            that.idcard = href.split('?')[1].split('&')[1].split('=')[1]
            that.patientId = href.split('?')[1].split('&')[2].split('=')[1]
            that.type = href.split('?')[1].split('&')[3].split('=')[1]
            that.title()
            setTimeout(function() {
                that.situation = $('.situation ul li')
                // 监听是否点击
                // 初始化清空数据
                for( var a = 0 ; a < that.situation.length; a++ ){
                    localStorage.removeItem(a)
                }
            },100)
        }
    })
</script>
</script>
</body>
</html>


